<template>
  <div class="backwater frame_content">
    <div class="bg_search ">
      <div class="bg_searchs">
        <a @click="defect" href="javascript:void(0);">添加反水</a>
      </div>
      <div class="sort">
        <a
          href="javascript:void(0);"
          v-for="(lev, index) in levels"
          :key="index"
          @click="bcWat(index)"
          >{{ lev }}</a
        >
      </div>
    </div>
    <table
      class="table_mon definewidth bg m10 context "
      style="margin-bottom: 40px"
    >
      <thead>
        <tr>
          <th style="width:5%">Id</th>
          <th>等级名</th>
          <th>类型</th>
          <th>最小统计</th>
          <th>最大统计</th>
          <th>反水比例</th>
          <th>模式</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in backWaterList" :key="index">
          <td>{{ item.id }}</td>
          <td>{{ levels[item.level_id] }}</td>
          <td>
            <span style="color: blue;">{{ lotterys[item.type_id] }}</span>
          </td>
          <td>{{ item.min }}</td>
          <td>{{ item.max }}</td>
          <td>{{ item.percent }}%</td>
          <td>{{ type[item.model] }}</td>
          <td>
            <a @click="modify(item)" href="javascript:void(0);" class="editBtn"
              >修改</a
            >
            |
            <a
              href="javascript:void(0);"
              @click="deleWater(item.id)"
              class="editBtn"
              >删除</a
            >
          </td>
        </tr>
      </tbody>
    </table>
    <div ref="mask" id="mask" class="mask" style="display:none">
      <div class="mask1">
        <span @click="closeMask" class="clockMask">χ</span>
        <div class="content" id="content">
          <table class=" common">
            <tbody>
              <tr v-show="isShow">
                <td>ID：</td>
                <td>
                  <input type="text" disabled :value="waterData.id" />
                </td>
              </tr>
              <tr>
                <td>模式</td>
                <td>
                  <select v-model="waterData.model">
                    <option
                      v-for="(i, index) in type"
                      :key="index"
                      :value="index"
                      >{{ i }}</option
                    >
                  </select>
                </td>
              </tr>
              <tr>
                <td>等级</td>
                <td>
                  <select v-model="waterData.level_id">
                    <option
                      v-for="(i, index) in levels"
                      :key="index"
                      :value="index"
                      >{{ i }}</option
                    >
                  </select>
                </td>
              </tr>
              <tr>
                <td>类型</td>
                <td>
                  <select v-model="waterData.type_id">
                    <option
                      v-for="(i, index) in lotterys"
                      :key="index"
                      :value="index"
                      >{{ i }}</option
                    >
                  </select>
                </td>
              </tr>
              <tr>
                <td>最少</td>
                <td>
                  <input v-model="waterData.min" type="text" />
                </td>
              </tr>
              <tr>
                <td>最大</td>
                <td>
                  <input v-model="waterData.max" type="text" />
                </td>
              </tr>
              <tr>
                <td>回水比</td>
                <td><input v-model="waterData.percent" type="text" />%</td>
              </tr>
              <tr>
                <td colspan="4">
                  <a class="btn" @click="submit(waterData)" id="submit">提交</a>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import http from "@/utils/http";
import { Toast } from "vant";
export default {
  data() {
    return {
      index: 0,
      isShow: false,
      waterData: {
        model: "0",
        level_id: "0",
        type_id: "0",
        min: "",
        max: "",
        percent: ""
      },
      levels: ["黄铜", "白银", "黄金", "铂金", "钻石", "银皇冠", "金皇冠"],
      type: ["流水模式", "输赢模式"],
      lotterys: [
        "重庆时时彩",
        "PK拾",
        "荷兰极速赛车",
        "幸运飞艇",
        "荷兰赛车",
        "荷兰时时彩",
        "极速赛车",
        "澳洲5",
        "澳洲10"
      ]
    };
  },
  computed: {
    ...mapState("backwater", ["backWaterList"])
  },
  methods: {
    ...mapActions("backwater", ["getBackWaterList"]),
    bcWat(i) {
      console.log(i);
      if (this.index != i) {
        this.getBackWaterList(i);
        this.index = i;
      }
    },
    //  添加回水
    defect() {
      let mask = this.$refs.mask;
      mask.style.display = "block";
    },
    //  修改
    modify(item) {
      let mask = this.$refs.mask;
      mask.style.display = "block";
      this.isShow = true;
      this.waterData = item;
    },
    //  提交
    submit(data) {
      console.log(data);
      this.isShow = false;
      let mask = this.$refs.mask;
      mask.style.display = "none";
      this.waterData = {
        model: "0",
        level_id: "0",
        type_id: "0",
        min: "",
        max: "",
        percent: ""
      };
      if (data.id) {
        console.log("修改");
        http
          .post(
            "/api/login/back_water/edit?token=2Q3ntNqyo5eaLmXITABb",
            {
              percent: data.percent,
              max: data.max,
              min: data.min,
              type_id: data.type_id,
              level_id: data.level_id,
              model: data.model,
              id: data.id
            }
          )
          .then(response => {
            console.log(response);
            if (response) {
              console.log("recu");
              let res = response.data;
              Toast(res.msg);
              if (res.status == true) {
                this.getBackWaterList(this.index);
              }
            } else {
              console.log(1);
            }
          });
      } else {
        console.log("添加");
        http
          .post(
            "/api/login/back_water/add?token=2Q3ntNqyo5eaLmXITABb",
            {
              percent: data.percent,
              max: data.max,
              min: data.min,
              type_id: data.type_id,
              level_id: data.level_id,
              model: data.model
            }
          )
          .then(response => {
            console.log(response);
            if (response) {
              console.log(121);
              let res = response.data;
              Toast(res.msg);
              if (res.status == true) {
                this.getBackWaterList(this.index);
              }
            }
          });
      }
    },
    // 删除
    deleWater(id) {
      let delewater = confirm("是否删除");
      if (delewater) {
        http
          .post(
            "/api/login/back_water/delete?token=2Q3ntNqyo5eaLmXITABb",
            {
              id: id
            }
          )
          .then(response => {
            console.log(response);
            this.getBackWaterList(this.index);
          });
      }
    },
    // 关闭
    closeMask() {
      let mask = this.$refs.mask;
      mask.style.display = "none";
      this.waterData = {
        model: "0",
        level_id: "0",
        type_id: "0",
        min: "",
        max: "",
        precent: ""
      };
      this.isShow = false;
    }
  },
  created() {
    this.getBackWaterList(0);
  }
};
</script>

<style>
.backwater {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: #333;
}
div.bg_search {
  width: 95%;
  height: 30px;
  border-bottom: 1px solid #ddd;
  border-radius: 10px;
  margin: 20px auto 0;
}
.bg_searchs {
  display: inline-block;
  vertical-align: top;
  margin-right: 1px;
}
.bg_search a {
  height: 25px;
  line-height: 25px;
  margin: 0 10px;
  text-decoration: none;
  color: #08c;
}
.bg_search a:hover {
  color: #005580;
}

div.sort {
  border: 1px solid #37538d;
  border-radius: 5px;
}
.m10 {
  margin-top: 10px;
}
#mask,
.mask1 {
  width: 400px;
  height: 500px;
}
div.mask {
  position: fixed;
  top: 150px;
  left: 0;
  right: 0;
  bottom: 0;
}
div.mask1 {
  border-radius: 10px;
  box-shadow: 0 0 10px grey;
  background: #f5f5f5;
  margin: 40px auto 0;
}
div.mask1 span {
  display: inline-block;
  width: 100%;
  height: 30px;
  box-sizing: border-box;
  padding-right: 10px;
  margin-top: 10px;
  font-size: 20px;
  text-align: right;
  color: #dddddd;
  cursor: pointer;
  border-bottom: 1px solid #dddddd;
}
div.content {
  width: 100%;
  height: 180px;
  margin-top: 20px;
  border-bottom: 1px solid #dddddd;
  box-sizing: border-box;
  padding: 10px 30px;
}
#submit {
  background-color: #f5f5f5;
}
.editBtn {
  color: #08c;
  text-decoration: none;
}
</style>
